<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>d3</title>
  <!--

    http://www.ourd3js.com/wordpress/396/

  -->
  <style>
    .axis path,
    .axis line {
      fill: none;
      stroke: black;
      shape-rendering: crispEdges;
    }

    .axis text {
      font-family: sans-serif;
      font-size: 11px;
    }
  </style>
</head>

<body>

  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script>
    var width = 400; //画布的宽度
    var height = 400; //画布的高度

    var svg = d3.select("body") //选择文档中的body元素
      .append("svg") //添加一个svg元素
      .attr("width", width) //设定宽度
      .attr("height", height); //设定高度

    var dataset = [250, 210, 170, 130, 90]; //数据（表示矩形的宽度）
    var rectHeight = 25; //每个矩形所占的像素高度(包括空白)

    // 比例尺
    var linear = d3.scale.linear()
      .domain([0, d3.max(dataset)])
      .range([0, 300]);

    // 刻度 设置文字 ⤵️
    // http://www.ourd3js.com/wordpress/111/
    var axis = d3.svg.axis()
      .scale(linear) //指定比例尺
      .orient("bottom") //指定刻度的方向
      .ticks(7); //指定刻度的数量

    svg.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(10,130)")
      .call(axis);

    svg.selectAll("rect")
      .data(dataset)
      .enter()
      .append("rect")
      .attr("x", 10)
      .attr("y", function(d, i) {
        return i * rectHeight;
      })
      .attr("width", function(d) {
        return linear(d);
      })
      .attr("height", rectHeight - 5)
      .attr("fill", "steelblue");
  </script>
</body>

</html>
